import Plugin from './plugin'
import {EN,CN} from '../config'
import {ColorPickerCfg} from '../config/plugins-config'
const cssText = `
##{cn.container} .#{icn.colorCvs}{
	position: absolute;
	background-color: #fff;
    box-shadow: 0 0 20px 1px;
}
`
export default class ColorPicker extends Plugin{
	constructor(...args){
		super(...args)
		this.name="ColorPicker"
		this.createClassName({
			colorCvs:"color-picker"
		})
		this.injectStyle(cssText,this.cn)
		this.cc = ColorPickerCfg.cc
		this.render()
		this.initColorPanel()

		this.bind()
	}
	bind(){
		this.$layer.addEventListener("click",(e)=>{
			this.focusOut()
		})
		this.$picker.addEventListener("click",(e)=>{
			e.stopPropagation()
			let {x,y} = e.epos()
			if(!this.isInPath(x,y))return
			let c = this.pick({x,y})
			this.cc = c.c16
			this.initColorPanel()
			this.emit(EN.action,{action:"onColorPick",data:c})
		})
		this.$picker.addEventListener("mousemove",this.onMove.bind(this))
	}
	render(){
		let {w,h} = ColorPickerCfg
		this.createLayer(CN.hide)
		this.$picker = document.createDOM("canvas",{
			class:this.cn.colorCvs,
			width:w,
			height:h
		})
		this.$layer.appendChild(this.$picker)
		this.ctx = this.$picker.getContext("2d")
	}
	initColorPanel(){
		let ctx = this.ctx;
		let {colors,ss} = ColorPickerCfg
		let {width,height} = ctx.canvas
		ctx.clearRect(0,0,width,height)

		colors.forEach((c,i)=>{
	       let d = i%7;
	       let r = Math.floor(i/7)
	       let x = d*20+(d+1)*10;
	       let y = r*20+(r+1)*10;
	       ctx.strokeStyle=ss;
	       ctx.fillStyle=c;
	       if(c==this.cc){
	       	ctx.strokeRect(x-5,y-5,30,30);
	        ctx.fillRect(x-5,y-5,30,30);
	       }else{
	       	ctx.strokeRect(x,y,20,20);
	        ctx.fillRect(x,y,20,20);
	       }
	       
	    })
	}
	onMove(e){
		let {x,y} = e.epos()
		let inPath = this.isInPath(x,y)
		this.$picker.classList[inPath?"add":"remove"](CN.pointer)
	}
	isInPath(px,py){
		let ctx = this.ctx;
		return ColorPickerCfg.colors.some((c,i)=>{
	       let d = i%7;
	       let r = i%6;
	       let x = d*20+(d+1)*10;
	       let y = r*20+(r+1)*10;
	       return (px>=x&&px<=x+20&&py>=y&&py<=y+20)
	    })
	}
	pick(pos){
		let {x,y} = pos
		let pixes = this.ctx.getImageData(x,y,1,1).data;
		let r = Number(pixes[0]);
		let g = Number(pixes[1]);
		let b = Number(pixes[2]);
		let a = Number(pixes[3]);
		let r16 = r.toString(16);
			r16=r16.length===1?"0"+r16:r16;
		let g16 = g.toString(16);
			g16=g16.length===1?"0"+g16:g16
		let b16 = b.toString(16);
			b16=b16.length===1?"0"+b16:b16
		let a16 = a.toString(16);
			a16=a16.length===1?"0"+a16:a16
		let rgb = `rgb(${r},${g},${b})`;
		let rgba = `rgba(${r},${g},${b},${a})`;
		let c16 = `#${r16}${g16}${b16}`.toUpperCase()
		let ca16 = `#${r16}${g16}${b16}${a16}`.toUpperCase()
		return {
			r,g,b,a,
			rgb,rgba,c16,ca16
		}
	}
	focusIn(data){
		let e = data;
		this.$picker.style.cssText = `left:${e.left}px;top:${e.top}px`
		this.$layer.classList.remove(CN.hide)
	}
	focusOut(){
		this.$layer.classList.add(CN.hide)
	}
}